//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
var canvas1=document.getElementById("myCanvas1");
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");

    //注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。
    ctx.setLineDash([3,4]);
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#8b96a9';

    //开始一个新的绘制路径
    ctx.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx.moveTo(0, 0);
    //定义直线的终点坐标为(50,10)
    ctx.lineTo(220, 0);
    ctx.lineTo(320, 115);
    ctx.lineTo(485, 115);
    //沿着坐标点顺序的路径绘制直线
    ctx.stroke();
    //关闭当前的绘制路径
    ctx.closePath();

    //开始一个新的绘制路径
    ctx.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx.moveTo(20, 100);
    //定义直线的终点坐标为(50,10)
    ctx.lineTo(210, 100);
    ctx.lineTo(285, 185);
    ctx.lineTo(440, 185);
    //沿着坐标点顺序的路径绘制直线
    ctx.stroke();
    //关闭当前的绘制路径
    ctx.closePath();

    //开始一个新的绘制路径
    ctx.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx.moveTo(35, 205);
    //定义直线的终点坐标为(50,10)
    ctx.lineTo(225, 205);
    ctx.lineTo(275, 250);
    ctx.lineTo(435, 250);
    //沿着坐标点顺序的路径绘制直线
    ctx.stroke();
    //关闭当前的绘制路径
    ctx.closePath();

    //开始一个新的绘制路径
    ctx.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx.moveTo(42, 310);
    //定义直线的终点坐标为(50,10)
    ctx.lineTo(473, 310);
    //沿着坐标点顺序的路径绘制直线
    ctx.stroke();
    //关闭当前的绘制路径
    ctx.closePath();

    //开始一个新的绘制路径
    ctx.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx.moveTo(45, 420);
    //定义直线的终点坐标为(50,10)
    ctx.lineTo(275, 420);
    ctx.lineTo(325, 355);
    ctx.lineTo(445, 355);
    //沿着坐标点顺序的路径绘制直线
    ctx.stroke();
    //关闭当前的绘制路径
    ctx.closePath();


    //开始一个新的绘制路径
    ctx.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx.moveTo(30, 520);
    //定义直线的终点坐标为(50,10)
    ctx.lineTo(225, 520);
    ctx.lineTo(285, 420);
    // ctx.lineTo(285, 275);
    //沿着坐标点顺序的路径绘制直线
    ctx.stroke();
    //关闭当前的绘制路径
    ctx.closePath();


    //开始一个新的绘制路径
    ctx.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx.moveTo(0, 630);
    //定义直线的终点坐标为(50,10)
    ctx.lineTo(230, 630);
    ctx.lineTo(295, 455);
    // ctx.lineTo(285, 275);
    //沿着坐标点顺序的路径绘制直线
    ctx.stroke();
    //关闭当前的绘制路径
    ctx.closePath();
}
if(canvas1.getContext){
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx1 = canvas1.getContext("2d");

    //注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。
    ctx1.setLineDash([3,4]);
    ctx1.lineWidth = 2;
    ctx1.strokeStyle = '#8b96a9';

    //开始一个新的绘制路径
    ctx1.beginPath();
    ctx1.moveTo(510, 0);
    //定义直线的终点坐标为(50,10)
    ctx1.lineTo(290, 0);
    ctx1.lineTo(190, 115);
    ctx1.lineTo(20, 115);
    //沿着坐标点顺序的路径绘制直线
    ctx1.stroke();
    //关闭当前的绘制路径
    ctx1.closePath();

    //开始一个新的绘制路径
    ctx1.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx1.moveTo(485, 100);
    //定义直线的终点坐标为(50,10)
    ctx1.lineTo(295, 100);
    ctx1.lineTo(215, 185);
    ctx1.lineTo(45, 185);
    //沿着坐标点顺序的路径绘制直线
    ctx1.stroke();
    //关闭当前的绘制路径
    ctx1.closePath();

    //开始一个新的绘制路径
    ctx1.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx1.moveTo(470, 205);
    //定义直线的终点坐标为(50,10)
    ctx1.lineTo(280, 205);
    ctx1.lineTo(225, 250);
    ctx1.lineTo(55, 250);
    //沿着坐标点顺序的路径绘制直线
    ctx1.stroke();
    //关闭当前的绘制路径
    ctx1.closePath();

    //开始一个新的绘制路径
    ctx1.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx1.moveTo(470, 310);
    //定义直线的终点坐标为(50,10)
    ctx1.lineTo(30, 310);
    //沿着坐标点顺序的路径绘制直线
    ctx1.stroke();
    //关闭当前的绘制路径
    ctx1.closePath();

    //开始一个新的绘制路径
    ctx1.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx1.moveTo(475, 425);
    //定义直线的终点坐标为(50,10)
    ctx1.lineTo(235, 425);
    ctx1.lineTo(185, 360);
    ctx1.lineTo(65, 360);
    //沿着坐标点顺序的路径绘制直线
    ctx1.stroke();
    //关闭当前的绘制路径
    ctx1.closePath();


    //开始一个新的绘制路径
    ctx1.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx1.moveTo(480, 520);
    //定义直线的终点坐标为(50,10)
    ctx1.lineTo(290, 520);
    ctx1.lineTo(220, 420);
    // ctx.lineTo(285, 275);
    //沿着坐标点顺序的路径绘制直线
    ctx1.stroke();
    //关闭当前的绘制路径
    ctx1.closePath();


    //开始一个新的绘制路径
    ctx1.beginPath();
    //定义直线的起点坐标为(10,10)
    ctx1.moveTo(510, 635);
    //定义直线的终点坐标为(50,10)
    ctx1.lineTo(280, 635);
    ctx1.lineTo(210, 455);
    // ctx.lineTo(285, 275);
    //沿着坐标点顺序的路径绘制直线
    ctx1.stroke();
    //关闭当前的绘制路径
    ctx1.closePath();
}